<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🍅 番茄时钟</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🍅 番茄时钟</h1>
            <p>专注工作，高效休息</p>
        </header>

        <main>
            <!-- 模式切换 -->
            <div class="mode-selector">
                <button class="mode-btn active" data-mode="work">工作模式</button>
                <button class="mode-btn" data-mode="short-break">短休息</button>
                <button class="mode-btn" data-mode="long-break">长休息</button>
            </div>

            <!-- 时钟显示区域 -->
            <div class="timer-container">
                <div class="progress-ring">
                    <svg class="svg-ring" width="300" height="300">
                        <circle
                            class="bg-ring"
                            cx="150"
                            cy="150"
                            r="130"
                            fill="transparent"
                            stroke-width="15"
                            stroke="#ecf0f1"
                        />
                        <circle
                            class="progress-bar"
                            cx="150"
                            cy="150"
                            r="130"
                            fill="transparent"
                            stroke-width="15"
                            stroke="#e74c3c"
                            stroke-linecap="round"
                            stroke-dasharray="816.814"
                            stroke-dashoffset="0"
                            transform="rotate(-90 150 150)"
                        />
                    </svg>
                    <div class="timer-display">
                        <span class="time-left">25:00</span>
                        <div class="current-mode">工作时间</div>
                    </div>
                </div>
            </div>

            <!-- 控制按钮 -->
            <div class="controls">
                <button id="startBtn" class="control-btn primary">开始</button>
                <button id="pauseBtn" class="control-btn" disabled>暂停</button>
                <button id="resetBtn" class="control-btn">重置</button>
            </div>

            <!-- 任务统计 -->
            <div class="stats-section">
                <h3>今日统计</h3>
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-value" id="completedPomodoros">0</div>
                        <div class="stat-label">完成番茄</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="totalFocusTime">0</div>
                        <div class="stat-label">专注分钟</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="efficiencyRate">0%</div>
                        <div class="stat-label">完成率</div>
                    </div>
                </div>
            </div>

            <!-- 自定义设置 -->
            <div class="settings">
                <h3>自定义设置</h3>
                <div class="setting-group">
                    <label for="workDuration">工作时长（分钟）：</label>
                    <input type="number" id="workDuration" min="1" max="60" value="25">
                </div>
                <div class="setting-group">
                    <label for="shortBreakDuration">短休息时长（分钟）：</label>
                    <input type="number" id="shortBreakDuration" min="1" max="30" value="5">
                </div>
                <div class="setting-group">
                    <label for="longBreakDuration">长休息时长（分钟）：</label>
                    <input type="number" id="longBreakDuration" min="1" max="60" value="15">
                </div>
                <div class="setting-group">
                    <label for="autoStartBreak">完成工作后自动开始休息：</label>
                    <input type="checkbox" id="autoStartBreak" checked>
                </div>
                <div class="setting-group">
                    <label for="autoStartWork">完成休息后自动开始工作：</label>
                    <input type="checkbox" id="autoStartWork" checked>
                </div>
                <button id="applySettingsBtn" class="apply-btn">应用设置</button>
            </div>
        </main>

        <footer>
            <p>© 2024 番茄时钟 | 提高工作效率，享受专注时光</p>
        </footer>
    </div>

    <!-- 通知音效 -->
    <audio id="notificationSound" preload="auto">
        <source src="https://assets.mixkit.co/active_storage/sfx/2870/2870-preview.mp3" type="audio/mpeg">
    </audio>

    <script src="script.js"></script>
</body>
</html>